<template>
<div>
    <div class="vs-table-box" style="max-width:1200px" v-loading="loading">
        <el-form label-position="right" ref="ruleForm" :rules="rules" class="vs--info"  label-width="110px" :model="ruleForm">
            <h3>{{title}}</h3> 
            <el-form-item label="顾客姓名" prop="username">
                <el-input v-model="ruleForm.username" :readonly="type==2" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-radio-group :disabled="type==2" v-model="ruleForm.gender">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="ruleForm.phone" :readonly="type==2" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="会员号" prop="code">
                <el-input :value="user.vip_no" readonly></el-input>
            </el-form-item>
             <el-form-item label="剩余金额" prop="code">
                <el-input :value="(user.balance||'0')+'元'" readonly></el-input>
            </el-form-item>
            <div v-for="(item,i) in ruleForm.projects" :key="i">
                <h3>项目信息{{i+1}}</h3> 
                <el-form-item 
                label="项目名称" 
                :rules="{ required: true, message: '请选择项目', trigger: 'change' }"
                :prop="'projects.'+i+'.id'">
                    <el-select 
                    v-model="item.id" 
                    :disabled="type==2"
                    filterable 
                    placeholder="请选择">
                        <el-option
                        v-for="val in projectList"
                        :key="val.id"
                        :label="val.name"
                        :value="val.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item 
                    label="房间号" 
                    :rules="{ required: true, message: '请选择房间号', trigger: 'change' }"
                    :prop="'projects.'+i+'.room_id'">
                    <el-input v-if="item.room" v-model="item.room.room_number" readonly style="width:100%" placeholder=""></el-input>
                </el-form-item>

                <el-form-item 
                label="床位号" 
                :rules="{ required: true, message: '请选择床位号', trigger: 'change' }"
                :prop="'projects.'+i+'.bed_id'">
                    <el-input v-if="item.bed" v-model="item.bed.number" readonly style="width:100%" placeholder=""></el-input>
                </el-form-item>

                <el-form-item 
                label="性别" 
                :rules="{ required: true, message: '请选择性别', trigger: 'change' }"
                :prop="'projects.'+i+'.gender'">
                    <el-radio-group size="small" :disabled="type==2" v-model="item.gender">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item 
                label="服务技师" 
                :rules="{ required: true, message: '请选择服务技师', trigger: 'change' }"
                :prop="'projects.'+i+'.staff_id'">
                    <el-input v-if="item.staff" v-model="item.staff.name" readonly style="width:100%" placeholder=""></el-input>
                </el-form-item>
                <el-form-item 
                label="排钟类型" 
                :rules="{ required: true, message: '请选择排钟类型', trigger: 'change' }"
                :prop="'projects.'+i+'.staff_type'">
                    <el-select v-model="item.staff_type" :disabled="type==2" filterable placeholder="请选择">
                        <el-option label="轮钟" :value="1"> </el-option>
                        <el-option label="点钟" :value="2"> </el-option>
                        <el-option label="加班1轮钟" :value="3"> </el-option>
                        <el-option label="加班1点钟" :value="4"> </el-option>
                        <el-option label="加班2轮钟" :value="5"> </el-option>
                        <el-option label="加班2点钟" :value="6"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="type!=2" label="" prop="asd">
                    <el-button @click='ruleForm.projects.splice(i+1,0,{"id":"",room_id:"","bed_id":"","gender":"","staff_id":"","staff_type":2})' type="primary">+新增项目信息</el-button>
                    <el-button v-if="i!=0" @click="ruleForm.projects.splice(i,1)" type="danger">删除</el-button>
                </el-form-item>
            </div>
            <el-form-item label="商品名称：" prop="asd">
                <el-table :data="ruleForm.skus">
                    <el-table-column prop="title" label="商品名称"></el-table-column>
                    <el-table-column label="规格名" min-width="150">
                        <template slot-scope="scope">
                            {{scope.row.sku_text}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="sale_price" label="标准价"></el-table-column>
                     <el-table-column label="金额">
                        <template slot-scope="scope">
                            {{(scope.row.sale_price * scope.row.number).toFixed(2)}}
                        </template>
                    </el-table-column>
                    <el-table-column label="数量" width="140">
                        <template slot-scope="scope" >
                            <span v-if="type==2">{{scope.row.number}}</span>
                            <el-input-number v-else v-model="scope.row.number" size="mini" :min="1" :max="scope.row.stock" :step="1" step-strictly></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" v-if="type!=2" label="操作">
                        <template slot-scope="scope">
                            <span class="tab-red-text" @click="ruleForm.skus.splice(scope.$index,1)">删除</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item v-if="type!=2" label="" prop="asd">
                <el-button @click='dialogVisible = true;' type="primary">+购买商品</el-button>
            </el-form-item>
        </el-form>
        <div class="vs-bottom-btns">
            <el-button @click="utils.backPage()">取消</el-button>
            <el-button v-if="type==1||type==3" @click="submit(1)" type="primary">保存</el-button>
            <el-button v-else-if="type==4" @click="submit(2)" type="primary" >结账</el-button>
        </div>
    </div>
    <el-dialog
        title="购买商品"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        width="850px">
        <el-form ref="dialog" :model="dialogGoods">
          <el-form-item label="商品："  prop="goods_id">
                <el-select v-model="dialogGoods.value" clearable filterable @change="changeGoods" multiple placeholder="请选择">
                    <el-option v-for="item in goodsList" :key="item.id" :label="item.title" :value="item.id"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品规格：" prop="username">
                <el-table ref="sku" :data="dialogGoods.sku" style="width: 800px">
                    <el-table-column width="70px" :selectable='checkboxSelect' type="selection"></el-table-column>
                    <el-table-column prop="title" label="商品名称"></el-table-column>
                    <el-table-column label="规格名" min-width="150">
                        <template slot-scope="scope">
                            {{scope.row.sku_text}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="sale_price" label="标准价"></el-table-column>
                    <!-- <el-table-column label="金额">
                        <template slot-scope="scope">
                            {{scope.row.sale_price * scope.row.number}}
                        </template>
                    </el-table-column> -->
                    <el-table-column label=" " width="140">
                        <template slot-scope="scope">
                            <!-- <el-input-number size="mini" :min="1" :max="Number(scope.row.stock)" v-model="scope.row.number" :step="1" step-strictly></el-input-number> -->
                            <el-alert
                                v-if="!scope.row.stock"
                                title="库存不足"
                                center
                                type="error"
                                :closable="false">
                            </el-alert>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose()">取 消</el-button>
            <!-- <el-button type="primary" @click="addGoods">确 定</el-button> -->
        </span>
    </el-dialog>
</div>
</template>

<script>
export default {
    data(){
        return {
            vasss:9,
            store_id:'',
            dialogVisible:false,
            dialogVisible2:false,
            loading:false,
            tableData:[],
            isBtn:false,
            title:'添加订单',
            order_id:'',
            type:1, //1添加     2详情   3编辑   4结账
            ruleForm:{
                user_id:"",//	预约单的用户id
                username:'',//	用户名
                gender:'',//性别
                phone:'',//手机号
                projects:[{
                    id:'',
                    room_id:'',
                    bed_id:'',
                    gender:'',
                    staff_id:'',
                    staff_type:'',
                }],
                skus:[],
            },
            dialogGoods:{
                value:'',
                sku:[],
            },
            dataList:[],
            user:{},
            projectList:[],
            roomList:[],
            techList:[],
            goodsList:[],
            ints:-1,
            rules: {
                username:{ required: true, message: '请输入顾客姓名', trigger: 'blur' },
                gender:{ required: true, message: '请选择性别', trigger: 'change' },
                phone:{ required: true, message: '请输入手机', trigger: 'blur' },
                mode:{ required: true, message: '请选择预约方式', trigger: 'change' },
                date:{ required: true, message: '请选择日期', trigger: 'blur' },
                time:{ required: true, message: '请选择时间', trigger: 'blur' },
                advance_amount:{ required: true, message: '请输入预付金额', trigger: 'blur' },
                number:{ required: true, message: '请输入预约人数', trigger: 'blur' },
            },
        }
    },
    created(){
        let {title='添加订单',id,type=1,store_id} = this.$route.query;
        if(title){
            this.$route.meta.title = title;
            this.title = title;
            this.type = type;
            this.store_id = store_id;
        }
        // if(out_trade_no){
        //     this.getOrders(out_trade_no)
        // }else 
        if(id){
            this.order_id = id;
            this.getOrders(id)
        }
        this.getProject();
        this.getGoods();
    },
    methods:{
        phoneBlur(){
            let phone = this.ruleForm.phone;
            if(!phone)return;
            clearTimeout(this.ints);
            this.ints = setTimeout(async ()=>{
                let {code,data} = await this.$Http.getUserByPhone({phone});
                if(code&&data){
                    this.user = data
                    this.ruleForm.username = data.username;
                    this.ruleForm.gender = data.gender;
                    this.ruleForm.phone = data.phone;
                }
            },500)
        },
        checkboxSelect(row, rowIndex){
            for(let j of this.ruleForm.skus){
                if(row.id == j.id){
                    return false;
                }
            }
            return row.stock;
        },
        addGoods(){
            // this.ruleForm.skus.push(...this.$refs.sku.store.states.selection);
            this.ruleForm.skus.push(...JSON.parse(JSON.stringify(this.$refs.sku.store.states.selection)));
            this.handleClose()
        },
        async getGoods(){
            let { code, data } = await this.$Http.getGoods({is_all:1,is_store:1});
            if(code){
                this.goodsList = data;
            }
        },
        changeGoods(e){
            let list = [];
            this.goodsList.filter(v=>{
                for(let val of e){
                    if(val == v.id){
                        v.sku.forEach(v2=>{
                            v2['number'] = 1;
                            v2.title = v.title;
                            // 暂
                        })
                        list.push(...v.sku)
                    }
                }
            })
            this.dialogGoods.sku = list;
        },
        submit(type){
            if(type==2){
                this.utils.goUrl('/settle')
                return;
            }
            this.$refs['ruleForm'].validate(async (valid) => {
                if(!valid)return;
                let obj = {...this.ruleForm};
                console.log(obj.projects,'obj.projects');
                obj.projects.forEach(v=>{
                    // v.staff_id=1
                    // v.project_id+="";
                    // v.id = v.project_id;
                })
                obj.user_id = this.user.id;
                obj.projects = JSON.stringify(obj.projects);
                obj.skus =  JSON.stringify(obj.skus.map(v=>{
                    return {
                        sku_id:v.id,
                        number:v.number
                    };
                }))
                console.log(obj,"@@@@@");
                
                let {code,data} = await this.$Http.setOrders(obj);
                if(code){
                    this.utils.backPage();
                    this.$message.success(obj.id?'修改订单成功':'添加订单成功')
                }
            })
        },
        bedList(item){
            console.log(item);
            let obj = this.roomList.find(v=>v.id==item.room_id)
            console.log(obj,'obj');
            if(obj)return obj.beds;
            return []
        },
        async getTech(){

            let {code,data} = await this.$Http.getTech({order_id:this.order_id});
            if(code){
                this.techList = data;
            }
        },
        async getProject(){
            let {code,data} = await this.$Http.getProject();
            if(code){
                this.projectList = data.data;
            }
        },
        async getOrders(id){//订单详情
            this.loading = true;
            let {code,data} = await this.$Http.ordersgetOrders({is_market:0,id,store_id:this.store_id});
            this.loading = false;
            if(code){
                this.user = data.user||{};
                // data = data.data.length?data.data[0]:{};
                this.ruleForm.user_id = data.user.id;
                this.ruleForm.username = data.user.username;
                this.ruleForm.phone = data.user.phone;
                this.ruleForm.gender = data.user.gender;
                this.ruleForm.id = data.id;
                data.project.forEach(v=>{
                    v.id = v.project.id;
                })
                this.ruleForm.projects = data.project;
                this.ruleForm.skus = data.goods.map(v=>{
                    v.title = v.goods_name;
                    v.id = v.sku_id;
                    return v;
                })
            }
        },
        handleClose(dom){
            dom&&dom();
            this.dialogVisible = false;
            this.dialogGoods = this.$options.data().dialogGoods;
        },
        setAd(){

        }
    }
}
</script>
<style lang="scss" scoped>
.el-input{
    width: 200px;
}
::v-deep{
    .asdws{
        .el-form-item__content{
            flex: 1;
        }
    }
}
</style>